// 'use client';
// import { useTheme } from "../hooks";
import {darkTheme, lightTheme} from "../constants/modes";
// import { getTheme } from "../context/ThemeProvider";
import {menus, menus1, menus2, menus3} from "../constants/datas";
import MenuItem from "./MenuItem";
import Link from 'next/link'
import {AccountIcon, SunIcon} from "../constants/icons";
import {getUserFromSession} from "@/lib/auth";
// todo: MenuContainer->获取要获取的频道类型,然后传给menu组件,menu组件动态请求后台视频数据
const Menu = () => {
    const user = getUserFromSession()
    // 切换主题,按钮的颜色也变换
    // const { toggleTheme } = useTheme();
    // const [mode, setMode] = useState("dark");
    // useEffect(() => {
    //   getTheme() == "dark" ? setMode("dark") : setMode("Light");
    // });
    // onClick={() => {
    //     toggleTheme();
    //     setMode("dark" ? "light" : "dark");
    // }}
    return (
        <div
            className={
                "sticky p-3 top-0 flex-[1.2] h-[100vh] overflow-scroll text-sm " +
                darkTheme +
                lightTheme
            }
        >
            <div className="py-18 px-26">
                <Link href={"/"}>
                    {/* logo */}
                    <div className="flex items-center font-bold ml-2 mb-2 ">
                        <img className="h-25 mr-4" src={'/logo.png'} alt="logo"/>
                        MalChan
                    </div>
                </Link>
                {menus.map((m) => (
                    <MenuItem key={m.name} to={m.to} name={m.name} icon={m.icon}/>
                ))}
                <hr className="my-4 mx-0 border-[0.5px] border-solid border-[#373737]"/>
                {menus1.map((m) => (
                    <MenuItem key={m.name} to={m.to} name={m.name} icon={m.icon}/>
                ))}
                <hr className="my-4 mx-0 border-[0.5px] border-solid border-[#373737]"/>
                {/* login */}
                {user ? <></> : (<>
                    <div className="">Sign in to like videos, comment, and subscribe.</div>
                    <Link href={"/signin"}>
                        <button
                            className="py-1 px-4 bg-transparent border-[1px] border-solid border-[#3ea6ff]
                    text-[#3ea6ff] rounded-md mt-[0.6rem] cursor-pointer flex items-center gap-1"
                        >
                            <AccountIcon fontSize={20}/>
                            SIGN IN
                        </button>
                    </Link>
                    <hr className="my-4 mx-0 border-[0.5px] border-solid border-[#373737]"/>
                </>)}
                <h2 className="ml-1 text-sm font-medium text-[#aaaaaa] ">
                    BEST TO LAMATUBE
                </h2>
                {menus2.map((m) => (
                    <MenuItem key={m.name} to={m.to} name={m.name} icon={m.icon}/>
                ))}
                <hr className="my-4 mx-0 border-[0.5px] border-solid border-[#373737]"/>
                {menus3.map((m) => (
                    <MenuItem key={m.name} to={m.to} name={m.name} icon={m.icon}/>
                ))}
                <div

                    className="flex items-center gap-2 cursor-pointer py-2 px-1"
                >
                    <SunIcon fontSize={26}/>
                    Mode
                </div>
            </div>
        </div>
    );
};

export default Menu;
